<!--
 * @Author: yan_hai_dong 891236760@qq.com
 * @Date: 2022-08-10 10:42:47
 * @LastEditors: yan_hai_dong 891236760@qq.com
 * @LastEditTime: 2022-10-24 10:55:22
 * @FilePath: \app\src\views\el\tree\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <el-tree :props="props" :load="loadNode" lazy show-checkbox> </el-tree>
  </div>
</template>

<script>
import { Random } from "mockjs";
export default {
  data() {
    return {
      props: {
        label: "name",
        children: "zones",
        isLeaf: "leaf",
      },
    };
  },
  methods: {
    loadNode(node, resolve) {
      console.log(node.data);
      setTimeout(() => resolve(createData(Random.integer(0, 20))), 500);
      function createData(length = 1) {
        let data = [];
        for (let i = 0; i < length; i++) {
          data.push({
            name: node.level === 0 ? Random.province() : Random.cname(),
            leaf: Random.boolean(),
            id: Random.integer(100),
          });
        }
        return data;
      }
    },
  },
};
</script>

<style lang="less" scoped>
</style>